import { ref } from 'vue'
export function changeColor() {
    const backgroundColor = ref('#2E5882')
    const colorList = ref(['#fff','#2E5882','#2D3283','#2E7682','#2E8366'])
    const textColor = ref('#fff')
    const maintextColor = ref('#2E5882')
    const btnColor = ref('#2E5882')
    const IconColor = ref('red')
    const tableChecked = ref('#7799BC')
    const tableNoChecked = ref('#D2DDE9')
    const tableTitle = ref('#D2DDE9')
    const mainColor = ref('#E8EEF4')
    
    const color = (value: any) => {
        console.log(colorList.value[value])
        backgroundColor.value = colorList.value[value]
        if (colorList.value[value] === '#fff') {
            textColor.value = 'black'
            maintextColor.value = '#666'
            btnColor.value = '#116cf8'
            IconColor.value = 'red'
            tableChecked.value = '#d7e7fc'
            tableNoChecked.value = '#f2f7fc'
            mainColor.value = '#E8EEF4'
            tableTitle.value = '#fff'
        }else if (colorList.value[value] === '#2D3283') {
            textColor.value = '#fff'
            maintextColor.value = '#2D3283'
            btnColor.value = '#2D3283'
            IconColor.value = 'red'
            tableChecked.value = '#fff'
            tableNoChecked.value = '#fff'
            mainColor.value = '#E8EEF4'
            tableTitle.value = '#fff'
        } else if (colorList.value[value] === '#2E7682') {
            textColor.value = '#fff'
            maintextColor.value = '#2E7682'
            btnColor.value = '#2E7682'
            IconColor.value = 'red'
            tableChecked.value = '#fff'
            tableNoChecked.value = '#fff'
            mainColor.value = '#E8EEF4'
            tableTitle.value = '#fff'
        }  else if (colorList.value[value] === '#2E8366') {
            textColor.value = '#fff'
            maintextColor.value = '#2E8366'
            btnColor.value = '#2E8366'
            IconColor.value = 'red'
            tableChecked.value = '#fff'
            tableNoChecked.value = '#fff'
            mainColor.value = '#E8EEF4'
            tableTitle.value = '#fff'
        } else {
            textColor.value = '#fff'
            maintextColor.value = '#2E5882'
            btnColor.value = '#2E5882'
            IconColor.value = 'red'
            tableChecked.value = '#7799BC'
            tableNoChecked.value = '#D2DDE9'
            mainColor.value = '#E8EEF4'
            tableTitle.value = '#D2DDE9'
        }
        localStorage.setItem('colorList',JSON.stringify({
            textColor: textColor.value,
            maintextColor: maintextColor.value,
            btnColor: btnColor.value,
            IconColor: IconColor.value,
            tableChecked: tableChecked.value,
            tableNoChecked: tableNoChecked.value,
            tableTitle: tableTitle.value,
            mainColor: mainColor.value,
            backgroundColor:backgroundColor.value
        }))
    }

    return {
        backgroundColor,
        colorList,
        textColor,
        maintextColor,
        btnColor,
        IconColor,
        tableNoChecked,
        tableChecked,
        tableTitle,
        mainColor,
        color
    }
}